<div class="width-full height-full full ">
<div class="width-540 login-container" >
  <div class="width-540 m-auto height-460 box-shadow" #loginForm>
    <div class="height-132">
       <div class="login-text text-left clearfix p-l-50">
          <span>欢迎登录家装综合运营管理平台</span>
       </div>  
    </div>
    
    <!-- 用户名或者手机登录 -->
    <div role="account" class="input-box-p-50" *ngIf="!isPhone">
      <div class="ui-inputgroup login">
       
        <input type="text" [(ngModel)]="user.code" (focus)="error.msg =''" name="user" pInputText placeholder="请输入用户名/手机号"
          (keyUp.enter)="login()">
      </div>
      <div class="ui-inputgroup login">
        
        <input type="password" onpaste="return false;" [(ngModel)]="accountPw" oncopy="return false;" maxlength="12" (focus)="error.msg =''" name="pw" pInputText placeholder="密码"
          (keyUp.enter)="login()" onkeyup="value=value.replace(/[^\w]/ig,'')">
      </div>
      <div class="ui-inputgroup login code" *ngIf="hasCheckCode" @fadeIn style="padding: 0;">
        <div class="width-full">
            <input type="text" [(ngModel)]="user.isCheckCode" maxlength="4" name="checkcode" pInputText placeholder="请输入图片验证码" (focus)="error.msg =''" (keyUp.enter)="login()">            
        </div>
        <span icon="fa-check" class="ui-inputgroup-addon radius-none border-none pull-right h-pointer">
          <img [src] = "checkCodeSrc" (click) = "getCheckCode('user')" class="width-full height-full">
        </span>
      </div>
      <div>
        <error-bar [msg]="error?.msg"></error-bar>
      </div>
      <div class="loginBtn">
        <button pButton class=" p-5 width-full height-60 colors-1a92eb" type="button" (click)="login()" label="登录"></button>
      </div>
      

      <div class="forget font-size-18 color-8f8f8f">
        忘记密码？
        <a href="javascript:void(0)" class="v-bottom p-r-5 color-1a92eb font-size-18 h-pointer" (click) = "forgotPassword()"> 点击这里</a>
      </div>
      
    </div>

    <!--  手机号登录 -->
    <div role="account" class="input-box-p-50" *ngIf="isPhone">
        <div class="ui-inputgroup login">
         
          <input type="text" [(ngModel)]="phone.code" maxlength="11" (focus)="phoneError.msg=''" name="phone" pInputText placeholder="请输入手机号"
            (keyUp.enter)="phoneLogin()">
        </div>

         <div class="ui-inputgroup login code" @fadeIn>
            <div class="width-full">
              <input type="text" [(ngModel)]="phone.phoneVerifyCode"  (focus)="phoneError.msg=''" maxlength="4" name="phonecode" pInputText placeholder="请输入验证码">
            </div>
          <button pButton type="button" (click)="getPhoneCode()" [disabled] = "gottenPhoneCode" label="{{gottenPhoneCode?(countdown + 's'):'获取验证码'}}" class=" btn-gray-bg border-none bg-input-icon ui-inputgroup-addon phone-btn"></button>
        </div>

        <div class="ui-inputgroup login code" *ngIf="hasPhoneTextCode" @fadeIn>
          <div class="width-full">
              <input type="text" [(ngModel)]="phoneTextCode" maxlength="4" name="phoneCheckcode" pInputText placeholder="请输入图片验证码"  (focus)="phoneError.msg=''" (keyUp.enter)="phoneLogin()">            
          </div>
          <span icon="fa-check" class="ui-inputgroup-addon radius-none border-none pull-right h-pointer">
            <img [src] = "phoneTextCodeSrc" (click) = "getCheckCode('phone')" class="width-full height-full">
          </span>
        </div>
        
        <div class="tip-text">为了您的账号安全，请使用手机验证码登录</div>
        <div>
          <error-bar [msg]="phoneError?.msg"></error-bar> 
        </div>
        <div class="loginBtn">
          <button pButton class=" p-5 width-full height-60 colors-1a92eb" type="button" (click)="phoneLogin()" label="登录"></button>
        </div>
  
        <div class="forget font-size-18 color-333">
          <!--忘记密码？-->
          <span href="#" class="v-bottom p-r-5 color-1a92eb font-size-18 h-pointer">  <!--点击这里--></span>
        </div>
        
      </div>

  </div>
  
</div>
</div>
<div style="top: 30%;">
  <p-dialog header="修改密码" [(visible)]="isplay" [width]="480" [draggable]="false" modal="modal" (onHide)="close()" class="editPw">
    <div style="margin-top:28px">
      <span class="newPw-title font-size-18 color-333">新密码：</span>
      <input type="password" name="newCode" onpaste="return false" (focus)="forgotMsg=''" maxlength="12" pInputText placeholder="密码可设置6至12位，数字+字母组合" @flyOut class="login font-size-18 newPw"  [(ngModel)]="newPw"  onkeyup="value=value.replace(/[^\w]/ig,'')" (keyUp.enter)="pwSubmit(newPw,confirmPW)">
    </div>

    <div>
      <span class="newPw-title font-size-18 color-333">确认密码：</span>
      <input type="password" name="confirmCode" onpaste="return false" maxlength="12" (focus)="forgotMsg=''" pInputText placeholder="请与新密码保持一致" @flyOut class="login font-size-18 newPw" [(ngModel)]="confirmPW"  onkeyup="value=value.replace(/[^\w]/ig,'')" (keyUp.enter)="pwSubmit(newPw,confirmPW)">
    </div>
    <div class="pw-tip font-size-14 color-ff0000">为了您的账号安全，请修改密码</div>
    <div class="sub-btn" style="margin-bottom: 28px;">
        <button pButton type="button" (click)="pwSubmit(newPw,confirmPW)" class="ui-button-success" style=" height: 40px; width:86px;" label="提交"></button>
    </div>
    <div>
      <error-bar [msg]="forgotMsg"></error-bar>
    </div>
  </p-dialog>
</div>
<p-growl [(value)]="msgs" [styleClass]="'center-message'"></p-growl>